<template>
  <div id="box">
    <div class="head">
      <div class="centre">
        <div class="left">
          <!-- <img src="~@/assets/home/logo.png" style="width: 325px" /> -->
        </div>
        <div class="header-panel">
          <ul>
            <li>白鹭会员</li>
            <li>预定管理</li>
            <li>互动专区</li>
            <li>出行帮助</li>
          </ul>
        </div>
        <div class="right">
          <img src="~@/assets/home/china.png" />
          <div class="login">
            <router-link to="/">登录|</router-link>
          </div>
          <div class="register">
            <router-link to="/">注册</router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="rotation-chart">
      <el-carousel :interval="5000" arrow="never">
        <el-carousel-item v-for="item in urlLbt" :key="item">
          <img :src="item.url" />
        </el-carousel-item>
      </el-carousel>
      <div class="query-flight-tickets">
        <div class="tabListOut">
          <ul>
            <li
              v-for="(item, index) in navList"
              :key="index"
              :class="current === item.code ? 'nav cur' : 'nav'"
              @click="doView(item)"
            >
              <span :class="'icon' + ' ' + 'icon' + item.code"></span>
              <p>{{ item.label }}</p>
            </li>
          </ul>
        </div>
        <div class="tabContent"></div>
        <div class="btn-large-yellow">查询</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: "0",
      navList: [
        { code: "0", label: "机票预订" },
        { code: "1", label: "行程服务" },
        { code: "2", label: "附加服务" },
        { code: "3", label: "移动端" },
      ],
      urlLbt: [
        {
          url: "/static/home/bailushui.jpg",
        },
        {
          url: "/static/home/xiamenmo.jpg",
        },
        {
          url: "/static/home/zaichufazhenqin.jpg",
        },
        {
          url: "/static/home/danxin.jpg",
        },
      ],
    };
  },
  methods: {
    /**
     * tab跳转
     */
    doView(item) {
      this.current = item.code;
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  width: 1920px;
  .head {
    width: 100%;
    height: 80px;
    .centre {
      width: 1000px;
      height: 100%;
      margin: auto;
      .left {
        float: left;
        width: 325px;
        height: 100%;
        background: url(~@/assets/home/logo.png) no-repeat center;
        background-size: 325px;
      }
      .header-panel {
        float: left;
        width: 416px;
        height: 100%;
        margin-left: 50px;
        ul {
          width: 416px;
          height: 100%;
          list-style-type: none;
        }
        li {
          width: 104px;
          height: 100%;
          float: left;
          text-align: center;
          line-height: 80px;
        }
      }
      .right {
        float: left;
        width: 209px;
        height: 100%;
        position: relative;
        img {
          position: absolute;
          top: 30px;
          left: 50px;
        }
        .login {
          position: absolute;
          top: 30px;
          left: 100px;
        }
        .register {
          position: absolute;
          top: 30px;
          left: 137px;
        }
      }
    }
  }
  .rotation-chart {
    width: 100%;
    height: 590px;
    background-color: blue;
    position: relative;
    z-index: 1;
    &::v-deep {
      .el-carousel__container {
        height: 590px;
      }
      .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
      }
      .el-carousel__item img {
        width: 100%;
        height: 100%;
      }
      .el-carousel__indicators--horizontal {
        position: absolute;
        left: 1155px;
        top: 475px;
      }
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }
      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }
    .query-flight-tickets {
      position: absolute;
      top: 100px;
      left: 460px;
      width: 410px;
      height: 355px;
      z-index: 2;
      border-radius: 10px 10px 10px 10px;
      .tabListOut {
        width: 84px;
        height: 316px;
        background-color: #2052b5;
        border-radius: 10px 0px 0px 10px;
        float: left;
        ul {
          list-style-type: none;
          .nav {
            color: white;
          }
          .nav.cur {
            color: black;
            background-color: white;
            border-radius: 10px 0px 0px 0px;
          }
          li {
            width: 84px;
            height: 79px;
            line-height: 120px;
            text-align: center;
            font-size: 12px;
            color: white;
            position: relative;
            cursor: pointer;
            .icon {
              position: absolute;
              top: 20px;
              right: 20px;
              width: 40px;
              height: 30px;
              background-color: red;
            }
            .icon0 {
              background: url(~@/assets/home/tab.png) 0 0;
              background-size: 400%;
            }
            .icon1 {
              background: url(~@/assets/home/tab.png) -40px 0;
              background-size: 400%;
            }
            .icon2 {
              background: url(~@/assets/home/tab.png) -80px 0;
              background-size: 400%;
            }
            .icon3 {
              background: url(~@/assets/home/tab.png) -120px 0;
              background-size: 400%;
            }
          }
        }
      }
      .tabContent {
        width: 326px;
        height: 333px;
        background-color: green;
        border-radius: 0px 10px 10px 0px;
        float: left;
      }
      .btn-large-yellow {
        position: absolute;
        bottom: 0px;
        left: 155px;
        width: 185px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: white;
        background-color: #ff7900;
        border-radius: 22px;
        cursor: pointer;
      }
    }
  }
}
</style>
